axios.defaults.baseURL = 'http://ajax-base-api-t.itheima.net'

const form = document.querySelector('#bookForm')
const tb = document.querySelector('#tb')
const btnSearch = document.querySelector('#btnSearch')

//渲染函数
const renderList = async function () {
  const res = await axios.get('/api/getbooks')
  // console.log(res)
  const { data } = res
  let html = data.data
    .map((item) => {
      // console.log(item);
      return `
          <tr>
          <td>${item.id}</td>
          <td>${item.bookname}</td>
          <td>${item.author}</td>
          <td>${item.publisher}</td>
          <td><a href="#" data-id="${item.id}">删除</a></td>
        </tr>
        `
    })
    .join('')
  tb.innerHTML = html
}
renderList()

// 添加图书
form.addEventListener('submit', async function (e) {
  e.preventDefault()
  const data = serialize(form, { hash: true })

  let resu = await axios.post('/api/addbook', data)

  const { data: res } = resu
  // console.log(res)
  alert(res.msg)
  if (!res.status === 201) return alert(res.msg)

  form.reset()
  renderList()
})

// 删除图书
tb.addEventListener('click', async function (e) {
  // console.log(e.target.tagName);
  if (e.target.tagName === 'A') {
    let id = e.target.dataset.id
    // console.log(id);
    const a = await axios.get('/api/delbook', { params: { id } })
    // console.log(res)
    renderList()
  }
})

// 查询图书
btnSearch.addEventListener('click', async function (e) {
  e.preventDefault()
  const data = serialize(form, { hash: true })
  console.log(data)

  const bookname = data.bookname
  const author = data.author
  const publisher = data.publisher

 const a = await axios
   .get('/api/getbooks', { params: { bookname, author, publisher } })
   
   const {data:res} = a
    // .then(({ data: res }) => {
      console.log(res)
      const { data:data1 } = res
      let html = data1
        .map((item) => {
          return `
          <tr>
          <td>${item.id}</td>
          <td>${item.bookname}</td>
          <td>${item.author}</td>
          <td>${item.publisher}</td>
          <td><a href="#" data-id="${item.id}">删除</a></td>
        </tr>
        `
        })
        .join('')
      tb.innerHTML = html
    // })
})

// 测试
// btnSearch.addEventListener('click', function (e) {
//   e.preventDefault()
//   const bookname = document.querySelector(
//     '#bookForm input[name=bookname]'
//   ).value
//   const author = document.querySelector('#bookForm input[name=author]').value
//   const publisher = document.querySelector(
//     '#bookForm input[name=publisher]'
//   ).value

//   console.log(bookname)
//   console.log(author)
//   console.log(publisher)

//   axios
//     .get('/api/getbooks', { params: { bookname, author, publisher } })
//     .then(({ data: res }) => {
//       console.log(res)
//       const { data } = res
//       let html = data
//         .map((item) => {
//           return `
//           <tr>
//           <td>${item.id}</td>
//           <td>${item.bookname}</td>
//           <td>${item.author}</td>
//           <td>${item.publisher}</td>
//           <td><a href="#" data-id="${item.id}">删除</a></td>
//         </tr>
//         `
//         })
//         .join('')
//       tb.innerHTML = html
//     })
// })
